<template>
	<view class="salesCases">
		<view class="salesCases_head">
			<view class="back" @click="navigateBack()">
			</view>
		</view>
		<view class="salesCases_content">
			<view class="flex">
				<view class="card">
					<view class="card_num">
						236<text class="card_text">W</text>
					</view>
					<text class="card_text">安全交易数量</text>
				</view>
				<view class="card">
					<view class="card_num">
						289W<text class="card_text">W</text>
					</view>
					<text class="card_text">处理找回案例</text>
				</view>
			</view>
			<view class="recent">
				近期案例
			</view>
			<view class="casesList">
				<view class="casesList_item" v-for="item in casesList">
					<image class="contentImg" :src="item.img" mode="aspectFill" ></image>
					<view class="">
						<view class="title">
							{{item.title}}
						</view>
				
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { tips_list } from "@/api/index" 
	export default {
		data(){
			return {
				casesList: []
			}
		},
		onLoad() {
			this.tips_list()
		},
		methods:{
			async tips_list() {
				let data = await tips_list()
				if (data) {
					this.casesList = data.data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.salesCases {
		.salesCases_head {
			height: 340rpx;
			background: url(~@/static/salesCases/bg_@2x.png) no-repeat;
			background-size: 100%;
			.back {
				position: absolute;
				top: 116rpx;
				left: -10rpx;
				height: 30px;
				width: 30px;
				margin-left: 30px;
				background: url(~@/static/salesCases/icon_back@2x.png) no-repeat;
				background-size: 100%;
			}
		}
		.salesCases_content {
			position: relative;
			background: #F7F8FA;
			background-color: #F7F8FA;
			padding: 0 30rpx;
			&::after {
				content: "";
				position: absolute;
				top: -30rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 30rpx;
				background-color: #F7F8FA;
				border-radius: 40rpx 40rpx 0px 0rpx;
			}
			.card {
				width: 50%;
				height: 196rpx;
				padding: 35rpx 35rpx 0 35rpx;
				&:nth-of-type(1) {
					background-color: red;
					background: url(~@/static/salesCases/card@2x.png) no-repeat;
					background-size: 100%;
					margin-right: 20rpx;
				}
				&:nth-of-type(2) {
					background-color: red;
					background: url(~@/static/salesCases/card2@2x.png) no-repeat;
					background-size: 100%;
				}
				.card_num {
					display: block;
					font-weight: bold;
					font-size: 52rpx;
					color: #22150B;
					line-height: 61rpx;
				}
				.card_text {
					font-weight: 500;
					font-size: 28rpx;
					color: #22150B;
					line-height: 33rpx;
				}
			}
			.recent {
				width: 100%;
				height: 76rpx;
				line-height: 76rpx;
				padding-left: 35rpx;
				margin-bottom: 25rpx;
				background: linear-gradient( 90deg, #FFE78F 0%, rgba(255,255,255,0) 100%);
				border-radius: 24rpx 0rpx 0rpx 24rpx;
			}
			.casesList {
				position: relative;
				overflow: scroll;
				.casesList_item {
					margin-bottom: 35rpx;
					background: #FFFFFF;
					padding-bottom: 15rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					overflow: hidden;
					.contentImg {
						width: 100%;
						height: 228rpx;
						object-fit: fill;
					}
					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #22150B;
						line-height: 33rpx;
						padding: 10rpx 20rpx;
					}
					.content {
						padding: 10rpx 20rpx;
					}
				}
			}
		}
	}
	
</style>